<script>
import {
  addCourseHistory,
  getCourseDetail,
  getHistoryByCourseId
} from 'api/course'
import {
  creatQuestionnaireRecord,
  getQuestionnaireDetail,
  getQuestionnaireRecordDetail
} from 'api/questionnaire'

export default {
  name: 'Detail',
  data() {
    return {
      detail: {},
      currentVideo: {},
      current: 0
    }
  },
  computed: {
    total() {
      return this.detail.list.reduce((pre, cur) => {
        if (cur.result === cur.value) {
          return Number(pre) + Number(cur.score)
        } else {
          return Number(pre) + 0
        }
      }, 0)
    },
    matchingScope({ detail, total }) {
      const findMatchingScope = (scope, total) => {
        if (!scope || scope.length === 0) {
          return null
        }
        const matchingScope = scope.find(
          (v) => Number(v.min) <= total && total <= Number(v.max)
        )
        return matchingScope || null
      }
      const { scope } = detail
      return findMatchingScope(scope, total)
    },
    isDisabled() {
      return this.$route.query.type === 'history'
    }
  },
  created() {
    if (this.$route.query.type === 'history') {
      this.getHistoryDetail()
    } else {
      this.getDetail()
    }
  },
  beforeDestroy() {
    this.recordHistory()
  },
  methods: {
    async getDetail() {
      if (!this.$route.query.id) return
      const res = await getQuestionnaireDetail({ id: this.$route.query.id })
      if (res.code === 200) {
        res.data.list = res.data.list.map((item) => {
          item.value = ''
          return item
        })
        this.detail = res.data
      }
    },
    async getHistoryDetail() {
      if (!this.$route.query.id) return
      const res = await getQuestionnaireRecordDetail({
        id: this.$route.query.id
      })
      if (res.code === 200) {
        res.data = {
          ...res.data,
          ...res.data.questionnaireInfo,
          list: res.data.record_options
        }
        this.detail = res.data
      }
    },
    async onsubmit() {
      const state = this.detail.list.filter((item) => !item.value).length > 0
      if (state) {
        return this.$message({
          message: '请将问卷填写完整',
          type: 'warning'
        })
      }
      const body = {
        result: this.total,
        recordOptions: this.detail.list,
        questionnaireId: this.$route.query.id
      }
      const res = await creatQuestionnaireRecord(body)
      if (res.code === 200) {
        this.$message({
          message: '提交成功',
          type: 'success'
        })
        this.current = 1
      }
      console.log('通过', body, this.matchingScope)
    }
  }
}
</script>

<template>
  <div class="container">
    <div class="content">
      <template v-if="current === 0">
        <div class="title">
          <div class="text-2xl text-center">{{ detail.title }}</div>
          <div v-if="isDisabled" class="text-xs mt-1 text-gray-800 text-center">
            评级： {{ matchingScope.title || "无评级" }}
          </div>
        </div>

        <ul class="questionnaire-list">
          <li v-for="(item, index) in detail.list" :key="item.id">
            <div>
              <span>{{ index + 1 }}. </span>
              <span class="">{{ item.title }}</span>
            </div>
            <div style="padding-top: 20px">
              <el-radio-group v-model="item.value" :disabled="isDisabled">
                <el-radio
                  v-for="(option, index) in item.options"
                  :key="option.id"
                  style="width: 100%; margin-bottom: 20px"
                  :label="option.id"
                >{{ option.title }}</el-radio>
              </el-radio-group>
            </div>
          </li>
        </ul>
      </template>
      <template v-else>
        <el-result
          icon="success"
          :title="matchingScope.title"
          sub-title="这是您的问卷报告评级，请查收"
        >
          <template slot="extra">
            <el-button
              type="primary"
              size="medium"
              @click="$router.back()"
            >返回</el-button>
          </template>
        </el-result>
      </template>
    </div>

    <div
      v-if="current === 0 && !isDisabled"
      class="mt-5 flex justify-center w-full"
    >
      <el-button
        class="w-64"
        size="large"
        @click="$router.back()"
      >返回</el-button>
      <el-button
        class="w-64"
        size="large"
        type="primary"
        @click="onsubmit"
      >提交</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.category-is-active {
  color: var(--el-color-primary);
}
.container {
  width: 1000px;
  margin: 0 auto;
  .content {
    background-color: #fff;
    min-height: 85vh;
    padding: 0 20px;
    max-height: 85vh;
    overflow: hidden;
    overflow-y: scroll;
    .title {
      padding: 20px 0;
      border-bottom: 1px dashed #808080;
    }
    .questionnaire-list {
      margin-top: 20px;
    }
  }
}
</style>
